<template>
  <a-card :bordered="false">
    <section class="table">
      <a-table ref="table" size="middle" bordered rowKey="objectSid" :columns="columns" :pagination="ipagination"
        :dataSource="agentList" @change="changePage" :loading="loading">
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="text" height="60px" alt=""
            style="max-width:100px;font-size: 12px;font-style: italic;" />
        </template>
      </a-table>
    </section>
    <!-- 新建弹窗 -->
    <a-modal :title="boxTitle" :visible="showAdd" :footer="false" width="40%" :closable="true" @cancel="onClose">
      <section class="add-box">
        <a-form-model :label-col="labelCol" :model="newAgent" ref="addForm" :wrapper-col="wrapperCol" :rules="addRules">
          <a-form-model-item label="活动名称" :required="true" prop="name">
            <a-input v-model="newAgent.name" placeholder="请输入活动名称" />
          </a-form-model-item>
          <a-form-model-item label="服务图片" :required="true" prop="imgUrl">
            <j-image-upload biz-path="adHot/serveImg" v-model="newAgent.imgUrl" placeholder="请上传服务图片"></j-image-upload>
          </a-form-model-item>
          <a-form-model-item label="活动状态">
            <a-select type="list_multi" show-search :filter-option="filterOption" v-model="newAgent.status"
              placeholder="请选择活动状态" >
              <a-select-option v-for="(i,index) in statusList" :value="i.id" :key="index">
                {{i.name}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
        <section class="btn-group">
          <a-button type="primary" :loading="saveLoading" @click="saveThis">保存</a-button>
          <a-button @click="onClose">取消</a-button>
        </section>
      </section>
    </a-modal>
  </a-card>
</template>

<script>
  import {
    ACCESS_TOKEN
  } from "@/store/mutation-types"
  import Vue from 'vue'
  import {
    postAction,
    getAction
  } from '@/api/manage'
  export default {
    name: 'AgentsList',
    data() {
      return {
        saveLoading: false,
        addloading: false,
        detailsloading: false,
        editloading: false,
        isNew: false,
        boxTitle: '',
        statusList:[
            {
                name:'启用',
                id:'1'
            },
            {
                name:'未启用',
                id:'0'
            }
        ],
        queryParam:{
            pageNo:1,
            pageSize:10
        },
        showChange: false,
        agentDetails: '',
        showDetails: false,
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 6
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        showAdd: false,
        agentList: [],
        newAgent: {},
        selectedRowKeysArrey: [],
        addRules: {
          name: [{
            required: true,
            message: '请输入活动名称!',
            trigger: ['change', 'blur']
          }],
          imgUrl: [{
            required: true,
            message: '请上传活动图片!',
            trigger: ['change', 'blur']
          }]
        },
        columns: [{
            title: '订单号',
            align: "center",
            dataIndex: 'sorderNo'
          },
          {
            title: '交易用户',
            align: "center",
            dataIndex: 'createdName'
          },
          {
            title: '订单金额（元）',
            align: "center",
            dataIndex: 'price'
          },
          {
            title: '分站收入（元）',
            align: "center",
            dataIndex: 'rakeAmount'
          }, {
            title: '交易时间',
            align: "center",
            dataIndex: 'createTime'
          }
        ],
        ipagination: {
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        balanceInfor:"",
        loading: false,
        chooseAgent: '',
        headers: {},
        url: {
          list: "/adminWithDraw/queryAllBill",
          edit: '/slideShow/edit',
          add: '/slideShow/add',
        },
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {
        "X-Access-Token": token
      }
      this.getList();
    },
    methods: {
      // 代理列表改变分页
      changePage(pagination) {
        this.queryParam.pageNo = pagination.current;
        this.queryParam.pageSize = pagination.pageSize;
        this.getList();
      },
      //   修改活动状态
      onChangeStatus(e) {
        if(e.status==1){
            e.status=0;
        }else{
           e.status=1;
        }
         this.saveLoading = true;
            postAction(this.url.edit, e).then(res => {
              console.log(res);
              this.saveLoading = false;
              if (res.success) {
                this.$message.success(res.message);
              } else {
                this.$message.error(res.message)
              }
            })
      },
      // 获取列表
      getList() {
        this.loading = true;
        getAction(this.url.list).then(res => {
          console.log(res);
          this.loading = false;
          if (res.success) {
            this.agentList = res.result.records;
            this.ipagination.total = res.result.total;
            this.selectedRowKeysArrey = [];
            this.chooseAgent = '';
          }
        }).finally(() => {
          this.loading = false
        })
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      onClose() {
        this.showAdd = false;
        this.showDetails = false;
        this.showAllot = false;
        this.showChangePassword = false;
        this.showLogin = false;
      },
      // 关闭抽屉
      afterVisibleChange() {
        // this.selectedRowKeysArrey = [];
        // this.newPassword = {};
        // this.queryParam = {
        //   createStartTime: '',
        //   createEndTime: '',
        //   agentName: '',
        //   degree: '',
        //   realname: '',
        //   phone: '',
        //   signingMethod: '',
        //   pageNo: this.queryParam.pageNo,
        //   pageSize: this.queryParam.pageSize
        // }
        // // showAdd = true 表示打开新增代理对象框，此时刷新列表
        // this.getList();
      },
      // 编辑活动
      editAgent(e) {
        this.editloading = true;
        this.newAgent = e;
        this.isNew = false;
        this.showAdd = true;
        if (this.$refs.addForm) {
          this.$refs.addForm.clearValidate();
        }
        this.boxTitle = "编辑活动";
      },
      changeService(e) {
        this.newAgent = e;
        this.showChange = true;
      },
      // 新增活动
      addAgent() {
        this.showAdd = true;
        if (this.$refs.addForm) {
          this.$refs.addForm.clearValidate();
        }
        this.isNew = true;
        this.newAgent = {}
        this.boxTitle = "新增活动"
      },
      // 保存活动
      saveThis() {
        console.log(this.newAgent);
        let url;
        if (this.isNew) {
          url = this.url.add
        } else {
          url = this.url.edit
        }
        this.$refs.addForm.validate(valid => {
          if (valid) {
            this.saveLoading = true;
            postAction(url, this.newAgent).then(res => {
              console.log(res);
              this.saveLoading = false;
              if (res.success) {
                this.$message.success(res.message);
                this.showAdd = false;
                this.getList();
              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  .button-group button {
    margin-right: 10px;
  }

  .time-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .table {
    margin-top: 20px;
  }

  .time-box span {
    min-width: 0 !important;
  }

  .btn-group {
    display: flex;
    justify-content: center;
  }

  .btn-group button {
    margin-right: 10px;
  }
</style>